<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #PicList{
            width:1200px;
            height:1px;
            margin:0 auto;
            position:relative;
        }
        #PicList ul li{
            width:210px;
            list-style:none;
            padding:10px;
            background:#fff;
            box-shadow: 0px 0px 5px #666;
            position:absolute;
        }
        #PicList ul li h3{
            font-size:14px;
            color:#666;
            font-weight:100;
            font-family: 微软雅黑;
            text-align: center;
            height:35px;
            line-height:35px;
        }
    </style>
</head>
<body>
    <div id="PicList">
        <ul>
            <li><img src="images/1.jpg"><h3>霍思燕旅游杂志写真</h3></li>
            <li><img src="images/2.jpg"><h3>霍思燕旅游杂志写真</h3></li>
            <li><img src="images/3.jpg"><h3>霍思燕旅游杂志写真</h3></li>
            <li><img src="images/4.jpg"><h3>霍思燕旅游杂志写真</h3></li>
            <li><img src="images/5.jpg"><h3>霍思燕旅游杂志写真</h3></li>
            <li><img src="images/6.jpg"><h3>霍思燕旅游杂志写真</h3></li>
            <li><img src="images/7.jpg" /><h3>霍思燕旅游杂志写真</h3></li>
            <li><img src="images/8.jpg" /><h3>霍思燕旅游杂志写真</h3></li>
            <li><img src="images/9.jpg" /><h3>霍思燕旅游杂志写真</h3></li>
            <li><img src="images/10.jpg" /><h3>霍思燕旅游杂志写真</h3></li>
            <li><img src="images/4.jpg" /><h3>霍思燕旅游杂志写真</h3></li>
            <li><img src="images/5.jpg" /><h3>霍思燕旅游杂志写真</h3></li>
            <li><img src="images/6.jpg" /><h3>霍思燕旅游杂志写真</h3></li>
            <li><img src="images/7.jpg" /><h3>霍思燕旅游杂志写真</h3></li>
            <li><img src="images/8.jpg" /><h3>霍思燕旅游杂志写真</h3></li>
            <li><img src="images/9.jpg" /><h3>霍思燕旅游杂志写真</h3></li>
            <li><img src="images/10.jpg" /><h3>霍思燕旅游杂志写真</h3></li>
        </ul>
    </div>
</body>
</html>
<script src="jQuery/jquery-3.1.1.min.js"></script>
<script>
    var margin = 10;//设置边距
    var li = $('#PicList li');//类数组
    var li_w = li[0].offsetWidth+margin;
    function Falls(n){
        var h = [];
        var n = n;
        for(var i = 0;i<li.length;i++){
            var li_h = li[i].offsetHeight;
            if(i<n){// 5为例 0 1 2 3 4 < 5
                h[i] = li_h;
                li.eq(i).css("top",0);
                li.eq(i).css("left",li_w*i);
            }else{
                var min_h = Math.min.apply(null,h);
                var minKey = getArrayKey(h,min_h);
                h[minKey] += li_h+margin;
                li.eq(i).css("top",min_h+margin);
                li.eq(i).css("left",minKey*li_w);
            }
        }
    }
    function getArrayKey(s,v){
        for(var k in s){
            if(s[k]==v){
                return k;
            }
        }
    }
    window.onload=function(){
        Falls(5);
    }
</script>